<template>
  <el-form ref="form" :rules="rules" :model="form" label-width="100px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" placeholder="请选择活动区域">
        <el-option v-for="obj in list" :key="obj.id" :label="obj.username" :value="obj.username" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="offFn">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getEmployeeSimpleAPI } from '@/api/employees'
import { addDepartmentsAPI, getDepartDetailAPI, updateDepartmentsAPI } from '@/api/departments'
export default {
  props: {
    pid: {
      type: String,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    existedCodeList: {
      type: Array,
      required: true
    },
    cExistedName: {
      type: Array,
      required: true
    }
  },
  data() {
    const validCode = (rule, value, callback) => {
      // value是要校验的数据
      // callback是回调函数
      // console.log(value)
      // if (this.isEdit) {
      //   // 如果是编辑状态,,则筛选出和this._code一样的code值
      //   this.existedCodeList.filter(item => item !== this._code)
      // } else {
      //   if (this.existedCodeList.includes(value)) {
      //     callback(new Error(`部门编号已经被占用了`))
      //   } else {
      //     callback()
      //   }
      // }
      // 优化之后的写法
      const list = this.isEdit ? this.existedCodeList.filter(item => item !== this._code) : this.existedCodeList
      console.log('list的值是', list)
      list.includes(value) ? callback(new Error(`部门编号已经被占用了`)) : callback()
    }
    const validName = (rule, value, callback) => {
      // 如果是编辑,则要去掉当前的部门名称,在数组中移除当前的名字
      const list = this.isEdit ? this.cExistedName.filter(item => item !== this._name) : this.cExistedName
      console.log('当前要修改的部门名称', value)
      console.log('占用的部门列表', list)
      list.includes(value) ? callback(new Error(`部门名称已经被占用了`)) : callback()
    }
    return {
      list: [],
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] },
          {
            validator: validName, // 自定义校验规则
            trigger: ['blur', 'change']
          }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] },
          {
            validator: validCode, // 自定义校验规则
            trigger: ['blur', 'change']
          }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: ['blur', 'change'] }
        ]
      },
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
        // pid: ''
      }
    }
  },
  async created() {
    console.log('弹窗创建了')
    // 获取下拉员工信息
    const res = await getEmployeeSimpleAPI()
    console.log(res)
    this.list = res
    if (this.isEdit) {
      // 数据回填,调用接口
      const res = await getDepartDetailAPI(this.pid)
      console.log(res)
      //   获取到的数据赋予给form
      this.form = res
      // 把_code定义在data中代码一样可以运行,区别在于写在data中的数据都有响应式的效果
      // 修改了这个值相对应的视图会更新
      // 这个_code,不需要它具备这样的能力,所以直接作为一个普通的属性加在this上
      this._code = res.code
      console.log('code的值', this._code)
      this._name = res.name
      console.log(this._name)
    }
  },
  methods: {
    // 添加部门的接口
    async getAddFn() {
      // 调用接口
      const res = await addDepartmentsAPI({ ...this.form, pid: this.pid })
      console.log(res, 1111111111111)
      // 通知父组件关闭弹窗,刷新页面
      this.$emit('updateDepart')
    },
    // 编辑更新的接口
    async getEditFn() {
      const res = await updateDepartmentsAPI(this.form)
      console.log('编辑更新', res)
      // 通知父组件关闭弹窗,刷新页面
      this.$emit('updateDepart')
    },
    // 点击确定按钮,确定是添加还是编辑
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.getEditFn()
          } else {
            this.getAddFn()
          }
        } else {
          alert('error')
        }
        // if (!valid) {
        //   alert('信息错误')
        //   return
        // }
        // this.isEdit ? this.getEditFn() : this.getAddFn()
      })
    },
    offFn() {
      this.$emit('off')
    }
  }

}
</script>

<style>

</style>
